<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>圣杯布局</title>
	<style>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header {
	width: 100%;
	height: 60px;
	background: rgba(11, 220, 239, .773);
	line-height: 60px;
}

main {
	width: 100%;
	height: calc(100vh - 160px);
}

/* main::after {
	display: table;
	clear: both;
	content: "";
} */

.left {
	float: left;
	margin-left: -100%;
	width: 300px;
	height: 100%;
	background: turquoise;
}

.container {
	float: left;
	width: 100%;
	height: 100%;
}

.content {
	margin-left: 300px;
	margin-right: 200px;
	height: 100%;
	background: #ccc;
}

.right {
	float: left;
	margin-left: -200px;
	width: 200px;
	height: 100%;
	background: rgb(77, 14, 222);
}

footer {
	width: 100%;
	height: 100px;
	background: rgba(0, 0, 0, .704);
	color: #fff;
}

	</style>
</head>

<body>
	<header>头部</header>
	<main>
		<div class="container">
			<div class="content">
				中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
			</div>
		</div>
		<aside class="left">
			左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏
		</aside>
		<div class="right">
			右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右
		</div>
	</main>
	<footer>
		底部
	</footer>
</body>

</html>